<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>公司认证</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.dtpicker.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link type="text/css" href="../../css/mui.picker.css" rel="stylesheet"/>
    <link type="text/css" href="../../css/mui.poppicker.css" rel="stylesheet"/>
    <style>
        body {
            font-size: 14px;
            scroll: no;
            background: rgba(0, 0, 0, 0.2);
            position: relative;
        }

        .pickerToTop {
            position: relative;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .aui-iconfont {
            position: absolute;
            top: 14px;
            right: 8px;
            z-index: 99;
        }

        .title {
            margin-bottom: 20px;
            text-align: center;
        }

        .layer {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }

        .tips {
            position: fixed;
            top: 0px;
            padding: 15px 0;
            z-index: 2;
            color: red;
            width: 100%;
            background: #fff;
        }

        .tips span {
            font-size: 20px;
            text-align: center;
            display: block;
            width: 100%;

        }

        /*商品规格选择，有带勾号的*/
        .format {
            padding: 30px 10px;
            z-index: 9;
            position: relative;
            width: 100%;
            height: 100%;
            background: #fff;
        }

        .format li:after {
            border-radius: 5px;
        }

        .format li.active {
            color: #327afa;
        }

        .format li.active:after {
            border-color: #327afa;
        }

        .format li.active:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-right: 22px solid #327afa;
            border-top: 15px solid transparent;
            bottom: 0;
            right: 0;
        }

        .format li {
            width: 30%;
            float: left;
            text-align: center;
            border-radius: 8px;
            padding: 5px 0;
            margin-bottom: 12px;
        }

        .format li i {
            display: none;
        }

        .format li.active i {
            display: block;
        }

        .format li:nth-of-type(3n+2), .format li:nth-of-type(3n+1) {
            margin-right: 5%;
        }

        .format .aui-iconfont {
            position: absolute;
            color: #fff !important;
            right: 1px;
            bottom: -8px;
            font-size: 12px !important;
        }

        .aui-border:after {
            border: 1px solid #999;
        }

    </style>
</head>
<body>

<div class="layer" tapmode onclick="cancel()"></div>
</body>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<!-- 时间 -->
<script type="text/javascript" src="../../script/city.data-3.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/mui.poppicker.js"></script>
<script type="text/javascript" src="../../script/mui.dtpicker.js"></script>
<script type="text/javascript" src="../../script/mui.picker.js"></script>
<script type="text/javascript">
    var orderId;
    var myPicker, type, cityResult, cityCodeResult;
    apiready = function () {
        api.parseTapmode();
        type = api.pageParam.type;
        switch (type) {
            case "area":
                showMyPick(type, 2)
                break;
            case "startTime":
                showTimePicker()
                break;
        }

    }


    function cancel() {
        api.closeFrame();
    }
    //mui插件
    (function ($, doc) {
        $.init();
        $.ready(function () {
            myPicker = new $.PopPicker({
                layer: 2
            });
            myPicker.setData(cityData3);
        });
    })(mui, document);

    function showMyPick(type, layer) {
        var city3 = "", cityCode3 = "";
        if (layer == "3") {
            city3 = (items[2] || {}).text;
            cityCode3 = items[2]["value"];
        }
        myPicker.show(function (items) {
            cityResult = (items[0] || {}).text + " " + (items[1] || {}).text + " " + city3;
            // 保存城市代码，修改时候设置默认值
            cityCodeResult = items[0]["value"] + '-' + items[1]["value"] + '-' + cityCode3;
            // $("#cityCode").val('222');
            api.sendEvent({
                name: "hasChoose",
                extra: {
                    city: cityResult,
                    cityCode: cityCodeResult,
                    type: type
                }
            })
            cancel();
        });
    }
    // 时间选择
    function showTimePicker() {
        var date = new Date();
        var beginYear = date.getFullYear() - 10;
        var endYear = date.getFullYear() + 5;
        var options = '{"type":"date","beginYear":' + beginYear + ',"endYear":' + date.getFullYear() + '}';
        var dtPicker = new mui.DtPicker(JSON.parse(options));
        dtPicker.show(function (selectItems) {
            var time = selectItems.text;
            api.sendEvent({
                name: "hasChoose",
                extra: {
                    time: time,
                    type: type
                }
            })
            cancel();


            dtPicker.dispose();
        })
    }
    $(document).on("click",".mui-backdrop",function () {
        cancel();
    })
</script>
</html>
